<script setup>
  import HomeNavBar from "@/views/home/cps/HomeNavBar.vue";
  import HomeSearchBox from "@/views/home/cps/HomeSearchBox.vue";
  import useHome from "@/stores/modules/home";
  import HomeCategories from "@/views/home/cps/HomeCategories.vue";
  import HomeResources from "@/views/home/cps/HomeResources.vue";
  import {computed, onActivated, onDeactivated, onUnmounted, ref, watch} from "vue";
  import useScroll from "@/hooks/useScroll";
  import SearchBar from "@/components/SearchBar/SearchBar.vue";

  const homeStore = useHome()

  //请求热门城市数据
  homeStore.fetchHotCity()
  //请求城市类别
  homeStore.fetchCategories()
  //下拉请求房源信息
  homeStore.fetchHouseList()

  //监听页面是否滚动到底部和获取滚动位置
  const {isBottom, scrollTop} = useScroll()
  watch(isBottom, (newValue) => {
    newValue && homeStore.fetchHouseList().then(() => {
      //将是否滚动到底部的标记改为false
      isBottom.value = false
    })
  })

  //搜索框的显示
  const isSearchBar = computed(() => scrollTop.value > 400)

  //组件销毁时重置状态
  onUnmounted(() => {
    homeStore.houseList = []
    homeStore.houseListPage = 0
  })

  //返回顶部按钮
  const isBackTop = ref(true)
  onActivated(() => {
    isBackTop.value = true
  })
  //页面不活跃时移除监听
  onDeactivated(() => {
    isBackTop.value = false
  })

</script>

<template>
  <div class="home page">
    <!--顶部导航条-->
    <home-nav-bar/>

    <!--首页图片-->
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="首页">
    </div>

    <!--搜索区-->
    <home-search-box/>

    <!--类别展示-->
    <home-categories/>

    <!--搜索框-->
    <transition>
      <search-bar v-show="isSearchBar"/>
    </transition>

    <!--房源展示-->
    <home-resources/>

    <!--返回顶部-->
    <van-back-top :offset="1200" v-if="isBackTop" immediate right="8vw" bottom="70px"/>

  </div>
</template>

<style lang="less" scoped>
  .home {
    .banner {
      img {
        width: 100%;
      }
    }

    .v-enter-active,
    .v-leave-active {
      transition: opacity 0.3s ease;
    }

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }
  }
</style>